<template>
    <div>
        <div @click="popup.openPopup" class="vue-flow-model">
            <n-icon size="30" color="#18A058">
                <AiStatus/>
            </n-icon>
            <Handle id="LogicalJudgment-inlet" type="target" :position="Position.Left"
                    :is-valid-connection="props.isValidSourcePos"/>
            <Handle id="LogicalJudgment-export" type="source" :position="Position.Right"
                    :is-valid-connection="props.isValidTargetPos"/>
        </div>
        <span>逻辑判断</span>
        <flow-popup-window
            :show="popup.show"
            :on-click-outside="popup.clickPopupOutside"
            :x="popup.x"
            :y="popup.y"
        >
            <n-card title="逻辑判断">
                <p>输入新列名称: </p>
                <n-input
                    v-model:value="new_column"
                />
                <div class="arranged">
                    <div>判断</div>
                    <div>列名</div>
                    <div>运算符</div>
                    <div>值</div>
                    <div>输出</div>
                </div>
                <div
                    v-for="(index,item) in if_column"
                    class="arranged"
                >

                    <n-popconfirm
                        @click="popup.reopen"
                        @positive-click="handlePositiveClick(item)"
                        @negative-click="handleNegativeClick(item)"
                    >
                        <template #trigger>
                            <div class="pointer">
                                {{ item ? "else if" : "if" }}
                            </div>
                        </template>
                        是否删除。
                    </n-popconfirm>
                    <n-select
                        v-model:value="index.if"
                        :options="props.data.data.title"
                        @update:value="popup.reopen"
                        placeholder="选择列名"
                        label-field="title"
                        value-field="key"
                    />
                    <n-select
                        v-model:value="index.symbol"
                        :options="symbolEnum"
                        @update:value="popup.reopen"
                        placeholder="运算符"
                    />
                    <n-input-number
                        v-model:value="index.value"
                        v-show="index.which === 'number'"
                    />
                    <n-date-picker
                        v-model:value="index.date_value"
                        type="date"
                        v-show="index.which === 'date'"
                    />
                    <n-icon @click="index.which = index.which === 'number'?'date':'number'"><Time/></n-icon>
                    <n-input
                        v-model:value="index.output"
                    />
                </div>
                <div class="else">
                    <div>else</div>
                    <div></div>
                    <div></div>
                    <div></div>
                    <n-icon></n-icon>
                    <n-input
                        v-model:value="else_column"
                    />

                </div>
                <template #footer>
                    <n-space>
                        <n-button @click="getSuperiorData">获取上级节点数据</n-button>
                        <n-button @click="addIfColumn">添加判断条件</n-button>
                        <n-button @click="judgment">判断</n-button>
                    </n-space>
                </template>
            </n-card>
        </flow-popup-window>
    </div>
</template>

<script setup>

import {Handle, Position} from "@vue-flow/core";
import {AiStatus,Time} from "@vicons/carbon";
import {useElementsStore} from "@/stores/elements";
import workApi from "@/http/workApi";
import FlowPopupWindow from "@/components/VueFlowModel/vueFlowPopupWindow/FlowPopupWindow.vue";

const props = defineProps(['isValidTargetPos', 'isValidSourcePos', 'id', 'data'])
const elements = useElementsStore()
// 点击弹窗
const popup = reactive({
    show: false,
    x: null,
    y: null,
    clickPopupOutside: () => {
        popup.closedPopup()
    },
    openPopup: (e) => {
        popup.x = e.x
        popup.y = e.y
        popup.show = true
    },
    closedPopup: () => {
        popup.show = false;
    },
    reopen: () => {
        popup.show = true
    }
})
// 新列名称
const new_column = ref("")
const symbolEnum = [
    {label: "等于", value: '='},
    {label: "大于", value: '>'},
    {label: "小于", value: '<'},
    {label: "不等于", value: '!='},
    {label: "大于等于", value: '>='},
    {label: "小于等于", value: '<='},
]
// 判断条件
const if_column = ref([
    {if: "", symbol: "=", value: 0,date_value:null,which:"number", output: ""},
])
const else_column = ref("")
const addIfColumn = () => {
    if_column.value.push(
        {if: "", symbol: "=", value: 0,date_value:null,which:"number", output: ""},
    )
}
const handlePositiveClick = (item) => {
    popup.reopen();
    if (!item) {
        window.$message.warning("必须保留基础条件")
        return
    }
    if_column.value.splice(item, 1)
}
const handleNegativeClick = (item) => {
    console.log(item)
    popup.reopen()
}
const judgment = ()=>{
    workApi.post("perform_tasks/data_logic",{
        data:props.data.data,
        new_column:new_column.value,
        if_column:if_column.value,
        else_column:else_column.value
    }).then(r=>{
        props.data.data = r.data
    })
}
const getSuperiorData = () => {
    // 获取上级节点数据
    for (let i of elements.elements) {
        if (i['target'] === props.id) {
            for (let j of elements.elements) {
                if (j.id === i['source']) {
                    props.data.data = {...j.data.data}
                    props.data.data.title.map(s => {
                        // 移除可修改
                        delete s.render
                        return s
                    })
                    return
                }
            }
        }
    }
}

</script>

<style scoped lang="less">
.n-card {
    width: 750px;

    .arranged {
        display: flex;
        align-items: center;

        > div {
            flex: 1;
            text-align: center;
            margin: 0 10px;
            font-size: 10px;
        }

        > div:nth-child(n+2) {
            flex: 4;
        }
    }

    .else {
        display: flex;
        align-items: center;

        > div {
            flex: 1;
            text-align: center;
            margin: 0 10px;
            font-size: 10px;
        }

        > div:nth-child(n+2) {
            flex: 4;
        }
    }
}
</style>